<!-- 登录页面 -->
<template>
  <div class="music-login">
    <div class="img"></div>
    <el-form class="login-form" :model="formData">
      <h1 class="title">欢迎登录QQ音乐</h1>
      <p>每一天，乐在沟通。</p>
      <el-form-item prop="username">
        <el-input
          v-model="formData.username"
          class="username"
          type="text"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="formData.password"
          class="password"
          type="password"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
      <el-button @click="handleClick()" class="res-btn" type="primary"
        >立即登录</el-button
      >
      <div class="register">
        <span>还没有账号？点击 </span>
        <a href="javascript:;" @click="jumpRegister()">立即注册</a></div>
    </el-form>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      // 表单数据
      formData: {
        username: "",
        password: "",
      },
      status: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleClick() {
      if (
        localStorage.getItem(this.formData.username) == this.formData.password
      ) {
        this.status = true;
        // console.log(this.$store);
        // vuex同步修改状态中的数据
        this.$store.commit("LOGIN", this.status);
        this.$router.push("./");
        localStorage.setItem("username", this.formData.username);
      } else {
        alert("用户名或密码错误");
      }
    },
    jumpRegister(){
      this.$router.push("./register");
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less'  scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.music-login {
  padding-top: 150px;
  background: #88bd89;
  width: 100%;
  height: 96vh;
  .img {
    width: 50%;
    height: 300px;
    display: inline-block;
    vertical-align: middle;
    background: url("../assets/images/login_bg.jpg") no-repeat center;
  }
  h1 {
    color: #fff;
    line-height: 30px;
    font-weight: 300;
  }
  p {
    color: #fff;
    line-height: 60px;
    padding: 0 0 15px 5px;
  }
  .login-form {
    width: 40%;
    height: 300px;
    vertical-align: middle;
    display: inline-block;
    .username,
    .password {
      width: 300px;
      border-radius: 4px;
      margin-bottom: 10px;
    }

    .res-btn {
      width: 300px;
      height: 40px;
      line-height: 40px;
      margin-top: 18px;
      border: 1px #3487ff solid;
      border-radius: 4px;
      background-color: #3487ff;
      box-shadow: 0 5px 8px 0 rgba(24, 95, 255, 0.1);
      color: #f0f0f0;
      margin: 0 auto;
      text-align: center;
      font-size: 16px;
    }
    .register{
      padding-top: 10px;
      color: #fff;
      a{
        font-weight: 500;
        font-size: 14px;
        text-decoration: none;
        color: #fff;
      }
      a:hover{
        color: #3487ff;
      }
    }
  }
}
</style>